﻿<template>
	<div class="car_case_details-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
			<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="案例id" prop="caseId">
							<el-input v-model="ruleForm.caseId" placeholder="请输入案例id" clearable />

						</el-form-item>

					</el-col> -->
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="地址" prop="url">
							<el-input v-model="ruleForm.url" placeholder="请输入地址" clearable />

						</el-form-item>

					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="图" prop="url">
							<el-upload list-type="picture-card" :limit="1" v-model:file-list="fileList"
								:show-file-list="false" :http-request="uploadcoverurlHandle">
								<img v-if="ruleForm.url" :src="ruleForm.url"
									style="width: 100%; height: 100%; object-fit: contain" />
								<el-icon v-else>
									<Plus />
								</el-icon>
							</el-upload>
						</el-form-item>
					</el-col>


					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="内容描述" prop="des">
							<el-input v-model="ruleForm.des" placeholder="请输入内容描述" clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="类型" prop="type">

							<el-select clearable filterable v-model="ruleForm.type" placeholder="请选择类型">
								<el-option v-for="(item, index) in typelist" :key="index" :value="item.value"
									:label="item.label" />
							</el-select>

						</el-form-item>

					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { uploadcoverurl } from '/@/api/main/car_case';
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { addcar_case_details, updatecar_case_details } from "/@/api/main/car_case_details";
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: "",
	},
});

const typelist = [{ "value": 1, "label": "图片" }, { "value": 2, "label": "视频" }];

//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
});

// 打开弹窗
const openDialog = (row, caseid) => {
	ruleForm.value = JSON.parse(JSON.stringify(row));
	console.log("caseid", caseid)
	ruleForm.value.caseId = caseid
	isShowDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
				await updatecar_case_details(values);
			} else {
				await addcar_case_details(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});
};


const fileList = [];
const uploadcoverurlHandle = async (options: UploadRequestOptions) => {
	//loadingImage=true;
	console.log(options)
	const res = await uploadcoverurl(options);
	ruleForm.value.url = res.data.result?.url;
	fileList = [];
	//	loadingImage=false;
};



// 页面加载时
onMounted(async () => {
});

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
